<template>
  <textarea />
</template>

<script lang='ts' setup>
import { defineEmit, defineProps, getCurrentInstance, onMounted, useContext } from 'vue';
import * as CodeMirror from 'codemirror';
import 'codemirror/mode/nginx/nginx.js';
import 'codemirror/addon/display/placeholder.js';
import 'codemirror/lib/codemirror.css';

let editor!: Any;
const props = defineProps<{
  modelValue: Any
}>();

const emit = defineEmit(['update:modelValue']);

onMounted(() => {
  const app = getCurrentInstance()?.proxy as Any;
  editor = CodeMirror.fromTextArea(app.$el, {
    lineNumbers: true,
    value: props.modelValue ?? '',
    mode: 'nginx',
    placeholder: `请选择配置项并输入配置参数，如
    
server {
  listen 173.255.219.235:443;
  server_name website.com.au;
  rewrite / $scheme://www.$host$request_uri permanent; ## Forcibly prepend a www
}
    `
  });
  editor.on('change', () => {
    emit('update:modelValue', editor.getValue());
  });
});

const setText = (txt: string) => {
  editor.setValue(txt || '');
};
const { expose } = useContext();
expose({
  setText
});

</script>

<style lang="postcss">
.CodeMirror {
  text-align: left;
  height: 100%;
  font-size: 14px;
  .CodeMirror-placeholder {
    color: #999 !important;
  }
}
</style>
